
/* globals svgEditor */
import imagePropertiesDialogHTML from './saveGraphic.html'

const template = document.createElement('template')
template.innerHTML = imagePropertiesDialogHTML
/**
 * @class SeImgPropDialog
 */
export class SeGraphicSave extends HTMLElement {
  /**
    * @function constructor
    */
  constructor() {
    super()
    // create the shadowDom and insert the template
    this.eventlisten = false
    this._shadowRoot = this.attachShadow({ mode: 'open' })
    this._shadowRoot.append(template.content.cloneNode(true))
    this.$dialog = this._shadowRoot.querySelector('#svg_createment')
    this.$saveBtn = this._shadowRoot.querySelector('#tool_prefs_save')
    this.$cancelBtn = this._shadowRoot.querySelector('#tool_prefs_cancel')
    this.$title = this._shadowRoot.querySelector('h2')
    this.$PrimitivesType = this._shadowRoot.querySelector('#fileType')
    this.$PrimitivesDesc = this._shadowRoot.querySelector('#fileDesc')
    this.updateContent();


  }

  /**
   * @function init
   * @param {any} name
   * @returns {void}
   */
  init(i18next) {
    this.setAttribute('common-ok', i18next.t('common.ok'))
    this.setAttribute('common-cancel', i18next.t('common.cancel'))
    this.setAttribute('common-cancel-hide', false)

  }

  /**
   * @function observedAttributes
   * @returns {any} observed
   */
  static get observedAttributes() {
    return ['dialog', 'common-ok', 'common-cancel', 'graphic-desc', 'graphic-type', 'title-text', 'common-cancel-hide']
  }

  /**
   * @function attributeChangedCallback
   * @param {string} name
   * @param {string} oldValue
   * @param {string} newValue
   * @returns {void}
   */
  attributeChangedCallback(name, oldValue, newValue) {

    if (oldValue === newValue) return
    switch (name) {
      case 'dialog':
        if (newValue === 'open') {
          this.$dialog.open()
        } else {
          this.$dialog.close()
        }
        break
      case 'common-ok':
        this.$saveBtn.textContent = newValue
        break
      case 'common-cancel':
        this.$cancelBtn.textContent = newValue
        break
      case 'title-text':
        this.$title.textContent = newValue
        break
      case 'graphic-desc':
        this.$PrimitivesDesc.value = newValue
        break
      case 'graphic-type':
        this.$PrimitivesType.value = newValue
        break
      case 'common-cancel-hide':
        this.$cancelBtn.style.display = (newValue === 'true') ? 'none' : 'block'
        break
      default:
        super.attributeChangedCallback(name, oldValue, newValue)
        break
    }
  }

  /**
   * @function get
   * @returns {any}
   */


  /**
   * @function get
   * @returns {any}
   */
  get dialog() {
    return this.getAttribute('dialog')
  }

  /**
   * @function set
   * @returns {void}
   */
  set dialog(value) {
    this.setAttribute('dialog', value)
  }

  async updateContent(){
    try {
      const response = await fetch(`${window.serviceUrl}/sys/dict/item/262`)
      const  data = (await response.json()).data;
      var template = '';
      var lang =  svgEditor.configObj.curPrefs.lang;
      var isChinese = lang=="zh-CN"?true:false;
      var length=$(this.$PrimitivesType).children().length;
      if(length) {return false}
      for(let i=0;i<data.length;i++){
          template+=`<option value=${data[i]['dict_value']}>${data[i]['dict_label']}</option>`
      }
      var contents = $(template);

      $(this.$PrimitivesType).empty();
      $(this.$PrimitivesType).append(contents);

    } catch (error) {
      console.error(`could not read file:`, error)
    }
  }

  /**
   * @function connectedCallback
   * @returns {void}
   */
  connectedCallback() {
    const onSaveHandler = () => {
      if (!this.$PrimitivesDesc.value) {
        alert("请输入文件名称描述")
        return;
      }
      const closeEvent = new CustomEvent('change', {
        detail: {
          dialog: 'close',
          graphicType: this.$PrimitivesType.value,
          graphicDesc: this.$PrimitivesDesc.value

        }
      })
      this.dispatchEvent(closeEvent)
    }
    const onCancelHandler = () => {
      const closeEvent = new CustomEvent('change', {
        detail: {
          dialog: 'closed'
        }
      })
      this.dispatchEvent(closeEvent)
    }
    svgEditor.$click(this.$saveBtn, onSaveHandler)
    svgEditor.$click(this.$cancelBtn, onCancelHandler)
    this.$dialog.addEventListener('close', onCancelHandler)
    this.eventlisten = true

  }
}

// Register
customElements.define('se-grahicsave-dialog', SeGraphicSave)
